<template>
  <div class="box">
    <!-- 饿了么容器 -->
    <el-row class="longinWrapper" type="flex" justify="center" align="middle">
      <!-- 表单 -->
      <el-form class="loginForm" ref="form" :model="form" label-width="100px">
        <div class="loginText">登录</div>
        <!-- 1.用户名 -->
        <el-form-item class="itemLable" label="用户名">
          <el-input class="inputItem" v-model="form.username"></el-input>
        </el-form-item>

        <!-- 2.密码-->
        <el-form-item class="itemLable" label="密码">
          <el-input class="inputItem" v-model="form.password"></el-input>
        </el-form-item>

        <!-- 3.按钮 -->
        <el-form-item>
          <el-button class="loginBtn" @click="loginSend" type="primary">登录</el-button>
          <el-button class="clearBtn" @click="clearInput">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      }
    };
  },
  //方法
  methods: {
    clearInput() {
      this.form = "";
    },
    loginSend() {
      //判断用户名和密码是否存在
      if (!this.form.username || !this.form.password) {
        //显示错误信息，并return
        this.$message.error("请输入正确的用户名和密码");
        return;
      }
      this.$axios({
        url: "/login",
        method: "post",
        data: this.form
      }).then(res => {
        console.log(res.data);

        //弹出登录成功的提示
        this.$message.success("登录成功");
        //存储数据到本地
        localStorage.setItem("token", JSON.stringify(res.data.data.token));
        localStorage.setItem("user", JSON.stringify(res.data.data.user));
        //登录成功，跳转到首页
        this.$router.push("/");
      });
    }
  }
};
</script>

<style lang="less" scoped>
//登录容器
.longinWrapper {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  background: url("../assets/背景1.png") no-repeat center center;
  //表单标签
  .loginForm {
    text-align: center;
    padding: 70px 70px 70px 50px;
    width: 500px;
    height: 300px;
    background: rgba(0, 0, 0, 0.1);
    //登录文本
    .loginText {
      flex-wrap: 700;
      color: slateblue;
      margin: -40px 0 30px 60px;
      font-size: 50px;
    }
    //表单标签
    .itemLable {
      //输入框
      .inputItem {
        height: 80px;
        margin-left: 20px;
      }
    }
    //确定按钮
    .loginBtn {
      font-size: 24px;
      padding: 20px 36px;
      border: none;
    }
    //重置按钮
    .clearBtn {
      font-size: 24px;
      color: #ca5d16;
      background: rgb(71, 212, 212);
      padding: 20px 36px;
      margin-left: 70px;
      border: none;
    }
  }
}
</style>